portabilityfandomcom_nl-20200215-history
Portable Infoboxes
Fandom's push towards a more inclusive wiki ecosystem now includes a "good practice" (not yet a best practice) to use (see also help for and ). These continue to evolve, and are the next generation after InfoboxBuilder-driven templates. Many Portable Infoboxes have already been created! This document is an alternative to the current official documentation. If you do not typically create or modify templates, this guide is not necessarily for you. You may want to start by reading the FAQ. As with any new feature, there will be bugs, so we'll try to track them here on the bug list. Background Like most , a format is developed inside a article (eg. Template:Infobox character). Unlike most other templates, however, a Portable Infobox template is written in a special XML format instead of or the . This type of markup is more typical of or inside wikitext, and Portable Infobox syntax is indeed the script for an extension; this allows it to format the rendered Infobox well on multiple platforms. Once the Template: has been created, it can be used just like any other Template in articles. For many, this means a drop-in replacement is possible for most wikis without having to change what is written in articles. The Migration tool is intended for just such a purpose; the resultant Drafts will require tweaking in many cases and are not usable as-is for a minority of wikis. In these cases, a more thorough refinement using syntax is required. It bears noting that in most cases where the Migration tool does not work well in approximating a good result, the templates being migrated are either very old (and tend to not render well across devices), very complex (using Lua or elaborate ), or very atypical Infoboxes (with designs that often will not render well on all devices). Basics Inside an article, an infobox is used the same way as has been typically done. The Template called (in this case Template:Infobox character) may be using the Portable Infobox syntax, which looks something like this: The example above does produce a viable Infobox, and indeed may be the basic result produced by the Migration Tool. There are some features missing that can be used to make that Draft better. Here, we'll introduce "default" (which can be used as a child of any element that calls for "source"), "labels" and "format". The latter is employed so that we can start using pure data instead of mixed data and units, but the same function can do many important things, which we will explain in more detail later in this document. Position Age Status Height } inches Weight } grams Drafts with the Migration Tool The InfoboxMigration tool is used to convert other types of infoboxes to PortableInfoboxes with mixed results. With more complex templates, manual editing is needed. Insertion of Infoboxes using the VisualEditor Using VisualEditor — the most common tool for new wiki contributors — the process of adding an Infobox itself is easy. There is a dropdown in the editing toolbar that provides a list of Portable Infoboxes. Modifying that same Infobox and some operations with it are not as simple. At this time, the parameters for an Infobox are exposed without explanation, and images and videos are not easily inserted. Inserting an image (or video) into the Infobox requires the VisualEditor insert tool in the main body of the article, and copying the pointer to that image into the Infobox using the Source Editor. It is important to remember what parameter the image should be placed into. It is not important to mark sizing, caption, thumbnail, or other modifiers to the image, as these are ignored. The width of the image is determined by CSS, and a caption should be handled by a separate parameter using the caption tag. In the current implementation, this copy/paste process is also necessary in the Classic (RTE) Editor. Tags If you are accustomed to traditional Templates, a word enclosed in three brackets (eg " }") is called a . They represent input to a Template, where the value of "word" is whatever is set in an article. The same input is recognized in Portable Infobox using source="word". Such parameters are used to store data in the article, but they don't have to display in the same way they are input. They can be output differently using the ' tag. The nesting of tags is very important to keep track of as some tags can only be nested in other types of tags. In XML, it is also important that tags be closed; if they do not require a closing tag, they should end with '/> To group together data elements into a section (either horizontally or vertically), a tag is helpful. tags represent a generic way to render any type of inside a Portable Infobox where it might otherwise be ignored or restricted. These tags typically occupy a whole section (much like the tag) and can be used to show links or any other information. Typically, a navigation tag is used as a footer. Images Partial functionality is supported if you pass a set of images to the template enclosed in or tags. See the section of help. ;Example portable infobox Season(s) First seen ;Example gallery usage ;Example tabber usage Styling with CSS Infoboxes using this kind of code are automatically styled, taking cues from your . If any of the variables are empty, the relevant row of the template will not be displayed (unless the 'default' tag has been used). Inline CSS is not supported. It also appears that custom classes are not supported, but a limited set of pre-defined classes can be used to style elements via theme and theme-source attributes. Layout For the overall or table info boxes, layouts are pretty basic right now and appear to only apply to data and their labels. labelDataThe default is a "table"-like layout with labels in data laid out like the box on the right. labelData The other layout is which puts labels above data and data indented box on the right. Layouts also apply to groups (see below) and give more options which will be described with the help for Groups. Groups You can think of groups like sub-infoboxes where you can control the layout and some functions independently of the overall infobox. Groups are especially good for portions of an infobox you want to be . You can add one of the following attributes: * collapse="closed" - collapsed by default * collapse="open" - uncollapsed by default Themes Themes are sets of CSS styles that apply to a particular portable infobox (via the theme="themename" attribute of ). Once you specify a theme, you can apply styles for the class .portable-infobox.pi-theme-''themename'' in your MediaWiki:Wikia.css. They will be different from the default styling, but will inherit defaults for anything not specified in the theme. ;Examples * See Portable Infobox/Themes Advanced output The most straightforward use of data types are to output values just as they were input. However, a secondary goal of Portable Infoboxes is a move towards structured data. In the height and weight examples above, it is assumed that all values are in inches and grams, and the format tag adds those labels to the output with the expectation that the input will be a number only. In future designs of Visual Editor, it is likely that entering a value that is not a simple number will be disallowed. Format tags Format tags () allow more control of how parameter data is displayed for , , and tags. ParserFunctions Calling ParserFunctions is currently done inside the , or tag, using a statement. This will not be called or displayed unless there is a value in the parent's data source parameter. DPL "DPL" stands for and is complex, powerful, but limited extension for wikis that can generate lists (primarily for tables) based on categories and other metadata (like time stamps and last editor). It is not enabled by default on Fandom wikis, so you will need to request it be enabled to use it. Future directions Details regarding functional replacements for Semantic MediaWiki (SMW) and possibly DynamicPageList inside infoboxes, as well as integrated HTML5 microdata, were discussed during Community Connect 2015, but nothing in detail. Examples See portable infobox examples. See also * Portable Infoboxes/Tips and tricks * Portable Infoboxes/Faq * Portable Infoboxes/Benefits * Portable Infoboxes/Best practices Discussions * Making a simplified documentation (e.g. basics page) * A pros (and cons) page for portable infoboxes * Non-standard (or exotic) portable infobox uses de:Portable Infoboxen fr:Infoboxes portables es:Infoboxes portátiles pt-br:Infoboxes Portáteis ru:Модульные инфобоксы zh:訊息框 ja:ポータブルインフォボックス Category:Documentation Category:Overviews Category:Portable Infobox Category:Portability Hub core articles